<template>
	<view class="indoor-distribution">
		<xbd-pages-content title="室内下单">
		<template #content>
			<view class="content">
				<!-- <row-item :typeArr="typeArr" @changeId="changeId"></row-item> -->
				<xbd-select title="请选择楼宇" :carId.sync="type" :visible.sync="visible" :infoList="typeArr" @selectSite="searchList">
					<template>
						<view class="row-item"  @click="visible = true">
							<view class="left">
								<slot name="left">
									<image src="@/static/images/deliveryorder/louyu.svg" mode=""></image>
									<text>{{ type }}</text>
								</slot>
							</view>
							<view class="right">
								<slot name="right">
									<uni-icons type="arrowright" size="18" color="#999"></uni-icons>
								</slot>
							</view>
						</view>
					</template>
				</xbd-select>
				
				<site-info isGet :_id='task_area_id' :obj="getObj" @changeTime="changeTime"></site-info>
				<site-info :isGet="false" :_id='task_area_id' :obj="unGetObj" @changeTime="changeTime" @switchChange="switchChange"></site-info>
				<!-- <RowItemToo></RowItemToo> -->
				<button type="default" class="btn" @click="summon">召唤</button>
			</view>
		</template>
		</xbd-pages-content>
	</view>
</template>

<script>
	import RowItem from '@/components/deliveryorder/RowItem.vue';
	import RowItemToo from '@/components/deliveryorder/RowItemToo.vue';
	import SiteInfo from '@/components/deliveryorder/SiteInfo.vue';
	import { DeliveryOrder } from '@/api/index.js';
	export default {
		components: {
			RowItem,
			RowItemToo,
			SiteInfo
		},
		data() {
			return {
				flag : true,
				type: '',
				visible: false,
				typeArr: [],
				getObj: {
					task_start_duration: 10,
					task_start_station_id: '',
					task_start_subarea: '',
					task_start_floor: '',
					task_start_station: '',
					task_start_phone: ''
				},
				unGetObj: {
					task_end_duration: 10,
					task_end_station_id: '',
					task_end_subarea: '',
					task_end_floor: '',
					task_end_station: '',
					task_end_phone: '',
					task_need_pick_verify: true
				},
				task_area_id: ''
			};
		},
		methods: {
			searchList(val) {
					this.task_area_id = val
						},
			changeTime(val, flag) {
				if (flag) {
					this.getObj.task_start_duration = val;
				} else {
					this.unGetObj.task_end_duration = val;
				}
			},
			summon(){
				if (!this.task_area_id) {
					return this.$showToast('请选择楼宇');
				} else if (!this.getObj.task_start_phone) {
					return this.$showToast('请选择取物站点');
				} else if (!this.unGetObj.task_end_phone) {
					return this.$showToast('请选择送物站点');
				} else if (this.getObj.task_start_station_id === this.unGetObj.task_end_station_id) {
					return this.$showToast('取物站点与送物站点位置不能一致！');
				}
				if(this.flag){
					this.flag = false
					this.confirm()
				}
			},
			async confirm() {
				const obj = {...this.getObj, ...this.unGetObj, task_area_id: this.task_area_id};
					try {
						this.$showLoading('加载中');
						const res = await DeliveryOrder.createDelivery(obj);
						console.log(res)
						uni.hideLoading();
						if (res.success) {
							this.flag = true
							const id = res.data.task._id
							uni.redirectTo({
					        url: `./derails?id=${id}`
					    });
						}else{
							this.flag = true
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
						
					} catch(e) {
						uni.hideLoading();
					}
				
			},
			switchChange(flag) {
				this.unGetObj.task_need_pick_verify = flag;
			},
				
			async init() {
				try {
					this.$showLoading('加载中');
					const res = await DeliveryOrder.getDeliveryBuilding();
					const { success, data: { list } } = res;
					if (success) {
						list.forEach(item => {
							item.value = item.area_id;
							item.label = item.area_name;
							item.state = item._id;
						})
						this.typeArr = list;
						if(this.type === ''){
							this.type = this.typeArr[0].label
							this.task_area_id = this.typeArr[0].value
						}
						
						uni.hideLoading();
					}
				} catch(e) {
					uni.hideLoading();
				}
			},
			getInfo(item, flag) {
				if (flag === 'true') {
					this.getObj.task_start_station_id = item.station_id;
					this.getObj.task_start_subarea = item.station_subarea;
					this.getObj.task_start_floor = item.station_floor_alias;
					this.getObj.task_start_station = item.station_num;
					this.getObj.task_start_phone = item.station_phone;
				} else {
					this.unGetObj.task_end_station_id = item.station_id;
					this.unGetObj.task_end_subarea = item.station_subarea;
					this.unGetObj.task_end_floor = item.station_floor_alias;
					this.unGetObj.task_end_station = item.station_num;
					this.unGetObj.task_end_phone = item.station_phone;
				}
			}
		},
		onLoad() {
			this.init();
			uni.$on('getInfo', this.getInfo);
			
		},
		onUnload() {
			uni.$off('getInfo', this.getInfo);
		}
	}

</script>

<style scoped lang="scss">
	.btn {
		width: 400rpx;
		height: 34px;
		line-height: 34px;
		margin: 45px auto 20px;
		text-align: center;
		border-radius: 8rpx;
		
		font-size: 28rpx;
		
		color: #FFFFFF;
		
		background-color: $uni-color-primary;
	}
	.row-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		padding: 20px 30rpx;
		margin-bottom: 10px;
		
		background-color: #FFFFFF;
		.left {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			
			color: #222222;
			image {
				width: 50rpx;
				height: 50rpx;
				margin-right: 10rpx;
			}
		}
	}
</style>
